<template>
  <el-card class="box-card">
    <div>
      <el-input class="input" v-model="input" placeholder="用户名"></el-input>
      <el-button type="primary" :icon="Search" @click="search">查询</el-button>
      <el-button type="default" @click="resetSearch">清空</el-button>
      <el
    </div>


    <div style="margin: 20px 0">
      <el-button type="primary" @click="showAddUser">添 加</el-button>
      <el-button type="danger" @click="revomveUsers" >批量删除</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column
        type="selection"
        width="55" >
      </el-table-column>
      <el-table-column
        label="序号"
        width="180"
        type="index">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="用户昵称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色列表">
      </el-table-column>
      <el-table-column
        prop="gmtCreate"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="gmtModified"
        label="更新时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template v-slot="{}">
          <el-button type="info" size="small" icon="el-icon-user-solid" @click=""></el-button>
          <el-button type="primary" size="small" icon="el-icon-edit" @click=""></el-button>
          <el-button type="danger" size="small" icon='el-icon-delete' @click=""></el-button>
        </template>
        
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 8, 10, 12]"
      :page-size="limit"
      layout="prev,pager, next,jumper,->,sizes,total"
      :total="total">
    </el-pagination>



  </el-card>
</template>


<script lang="ts">

  import {reqUserManagementList} from "../../../api/product/user";

  export default {
    name: 'User',
    data() {
      return {
        tableData: [],
        currentPage: 1,
        total:10,
        limit:5
      }
    },
    methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.getReqUserManagementList(val);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.getReqUserManagementList(val);
      },
      getReqUserManagementList(page){
        this.currentPage = page
        reqUserManagementList(this.currentPage,this.limit).then(res=>{
          console.log(res)
          this.tableData = res.items;
          this.total=res.total
        })
      }
    },
    mounted() {
      this.getReqUserManagementList(this.currentPage);
    }
  };
</script>


<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    margin-top: 20px;
    margin-left: 20px;
    width: 97%;
  }
  .input{
    width: 180px;
    margin-right: 10px;
  }
</style>
